import React,{useState,useEffect} from 'react'
import * as echarts from 'echarts';

const EcharOne=()=>{

    useEffect(()=>{

        async function EcharOne(){
            await CharDataTwo()
        }

        EcharOne()

    })

    const CharDataTwo = ()=>{

          var chartDomTwo = document.getElementById('main-two');
          var myChartTwo = echarts.init(chartDomTwo);
          var optionTwo;
      
      
          setTimeout(function () {
      
            optionTwo = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2016', '2017', '2018', '2019', '2020', '2021'],
                        ['group1', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                        ['group2', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                        ['group3', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                        ['group4', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        emphasis: {focus: 'data'},
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };
        
            myChartTwo.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChartTwo.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });
        
            myChartTwo.setOption(optionTwo);
        
        });
        
        optionTwo && myChartTwo.setOption(optionTwo);
      
     }


    return (
        <div id="main-two" style={{width:1000,height:800,marginBottom:50}}></div>    
    )

}

export default EcharOne;